<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getStudentBaseInfoList } from '@/services/studentInfo'
import { updateStudentPointsAPI } from '@/services/studentInfo'
import type { StudentInfoItem, StudentInfoParams } from '@/types/studentInfo'

const studentList = ref<StudentInfoItem[]>([])
const loading = ref(false)
const currentStudent = ref<StudentInfoItem | null>(null)
const pointsToAdd = ref(0)
const showAddPointsDialog = ref(false)
const pageParams = ref<StudentInfoParams>({
  pageNum: 1,
  pageSize: 1000,
})

// 获取学生列表
const fetchStudentList = async () => {
  loading.value = true
  try {
    const res = await getStudentBaseInfoList(pageParams.value)
    studentList.value = res.data.rows
  } catch (error) {
    uni.showToast({
      title: '获取学生列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

// 打开添加积分弹窗
const openAddPointsDialog = (student: StudentInfoItem) => {
  currentStudent.value = student
  pointsToAdd.value = 0
  showAddPointsDialog.value = true
}

// 提交积分添加
const submitAddPoints = async () => {
  if (!currentStudent.value || pointsToAdd.value <= 0) {
    uni.showToast({
      title: '请输入有效的积分数量',
      icon: 'none',
    })
    return
  }

  loading.value = true
  try {
    await updateStudentPointsAPI({
      id: currentStudent.value.id,
      learningPoints: pointsToAdd.value,
    })

    // 更新本地学生积分
    fetchStudentList()
    uni.showToast({
      title: '积分添加成功',
      icon: 'success',
    })

    showAddPointsDialog.value = false
  } catch (error) {
    uni.showToast({
      title: '积分添加失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

// 页面加载时获取学生列表
onMounted(() => {
  fetchStudentList()
})

// 搜索函数
const handleSearch = (e: Event) => {
  const target = e.target as HTMLInputElement
  pageParams.value.name = target.value
  fetchStudentList()
}
</script>

<template>
  <view class="points-manager-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input
        type="text"
        placeholder="搜索学生姓名"
        class="search-input"
        @input="(event) => handleSearch(event as unknown as Event)"
      />
    </view>

    <!-- 学生列表 -->
    <view class="student-list" v-if="!loading">
      <view class="student-item" v-for="student in studentList" :key="student.id">
        <view class="student-info">
          <view class="student-name">{{ student.name }}</view>
          <view class="student-details">
            <text>联系人: {{ student.guardian }} / {{ student.guardianPhone }}</text>
          </view>
        </view>
        <view class="student-points">
          <text class="points-label">积分:</text>
          <text class="points-value">{{ student.learningPoints || 0 }}</text>
        </view>
        <button class="add-points-btn" @click="openAddPointsDialog(student)">添加积分</button>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <view class="spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 添加积分弹窗 -->
    <view class="dialog-mask" v-if="showAddPointsDialog"></view>
    <view class="add-points-dialog" v-if="showAddPointsDialog">
      <view class="dialog-title">添加积分 - {{ currentStudent?.name }}</view>
      <view class="dialog-content">
        <view class="form-item">
          <text class="form-label">积分数量</text>
          <input
            type="number"
            v-model.number="pointsToAdd"
            class="form-input"
            placeholder="请输入积分数量"
          />
        </view>
      </view>
      <view class="dialog-footer">
        <button class="cancel-btn" @click="showAddPointsDialog = false">取消</button>
        <button class="confirm-btn" @click="submitAddPoints">确认添加</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.points-manager-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.search-bar {
  margin-bottom: 20rpx;
}

.search-input {
  width: 100%;
  height: 70rpx;
  border-radius: 35rpx;
  background-color: #f5f5f5;
  padding: 0 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.student-list {
  margin-top: 20rpx;
}

.student-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.student-info {
  flex: 1;
}

.student-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.student-details {
  font-size: 26rpx;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.student-points {
  margin-right: 20rpx;
  text-align: right;
}

.points-label {
  font-size: 26rpx;
  color: #666;
}

.points-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #e64340;
}

.add-points-btn {
  background-color: #3498db;
  color: #fff;
  font-size: 28rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500rpx;
}

.spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.add-points-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  z-index: 1000;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.form-input {
  width: 100%;
  height: 70rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 150rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  resize: none;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.cancel-btn {
  flex: 1;
  background-color: #f5f5f5;
  color: #333;
  margin-right: 20rpx;
  font-size: 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 8rpx;
}

.confirm-btn {
  flex: 1;
  background-color: #3498db;
  color: #fff;
  font-size: 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 8rpx;
}
</style>
